<template>
  <section id="promotion-info">
    <!-- <content-with-loading :loaded="loaded"> -->
      <!-- <appbar :link="linkName"/> -->
      <magic-header v-if="$.env !== 'wxPublic'" titleName="促销详情"></magic-header>
      <!-- <magic-header :titleName="linkName"></magic-header> -->
      <section class="promotion-title">
        <h3>{{promotionInfo.title}}</h3>
        <p class="time">发布时间：{{promotionInfo.publishDate}}</p>
        <div>优惠时间：{{promotionInfo.beginDate}} 至 {{promotionInfo.endDate}}</div>
        <rule :value="introduction" :isShow="introductionShow" />
      </section>
      <loadmore :getMore="gListProductByPromotion" :allLoaded="promotionInfo.type == '6'">
        <section class="promotion-content">
          <div class="promotion-content-top">
            <div class="content-top-left">活动商品</div>
            <!--  -->
            <div class="content-top-right" v-if="false">
              <order-header @checked="checkedOrderHeader" :textArray=" ['综合', '销量', '价格']" />
            </div>
          </div>
          <div class="promotion-content-list">
            <panel v-for="item in PromotionProduct" 
                  :key="item.id"
                  v-tap="{methods:go,item:item}"
                  :value="item">
              <div slot="check" class="check">
                <span>￥{{item.price}}</span>
                <del v-if="item.marketPrice">￥{{item.marketPrice}}</del>
              </div>       
            </panel>
            <p v-if="promotionInfo.type == '6'" class="couponAmount">套餐价格：<span>￥{{promotionInfo.coupon&&promotionInfo.coupon.amount}}</span></p>
          </div>
        </section>
      </loadmore>
  </section>
</template>

<script>
  // import Appbar from 'components/appbar'
  import magicHeader from 'components/magicHeader'
  import panel from 'components/panel'
  import orderHeader from 'components/order-header'
  import rule from 'components/rule'
  import loadmore from 'components/loadmore'
  // import ContentWithLoading from 'components/content-with-loading'

  // import apiHost from 'settings/api-host'
  import promotionInfoData from 'services/promotion-info-data'

  //引入图标
  import defaultCallIcon from 'assets/default_call_icon.png'
  import serviceDrivingIcon from 'assets/service_driving_icon.png'
  import iconDepreciateGray from 'assets/icon-depreciate-gray.png'
  import iconShare from 'assets/icon_share.png'

  import calcMethod from 'utilities/calc-method'
  // import hybridRouter from 'settings/hybrid-router'

  export default{
    components: {
      magicHeader,
      panel,
      orderHeader,
      rule,
      loadmore
    },
    deactivated () {
      //不是你期望的数据 则销毁组件
      if (this.couponId !== this.$route.params.id) {
        this.$destroy()
      }
    },
    data() {
      return {
//        会员券id
        couponId: '',
//        接受上一级的路由
        linkName: '',
//        促销活动详情
        promotionInfo: {},
        loaded: true,
        locationHref: this.addPath(),
//        手机图标
        iconCall: defaultCallIcon,
//        预约图标
        iconService: serviceDrivingIcon,
        iconDepreciateGray: iconDepreciateGray,
        iconShare: iconShare,
        introduction:'',
        introductionShow:false,
        PromotionProduct:[],
        pageable:{
          pageNumber:1,
          pageSize:5
        }
      }
    },
    created(){
      this.linkName = {name: this.$route.params.linkName}
      this.couponId = this.$route.params.id
      this.getPromotionInfo(this.couponId)
      this.gListProductByPromotion()
    },
    methods: {
//      获取促销详情
      getPromotionInfo(couponId){
        promotionInfoData.getPromotionInfo.bind(this)({
          id: couponId
        }, (data) => {
          this.promotionInfo = data.promotion
          this.loaded = true;
          //遍历一遍数组 给图片全部增加本地的地址
          this.promotionInfo.product && this.promotionInfo.product.forEach((data) => {
            data.brandLogo = this.addPath(data.brandLogo)
          })
          if(data.promotion&&data.promotion.coupon&&data.promotion.coupon.introduction==undefined){
            this.introductionShow = false
          }else{
            this.introductionShow = true
          }
          this.introduction = data.promotion && data.promotion.coupon && data.promotion.coupon.introduction && data.promotion.coupon.introduction
        }, (err) => {
          console.log(err)
          this.loaded = true;
        })
      },
      gListProductByPromotion(){
         promotionInfoData.gListProductByPromotion.bind(this)({
           pageable:this.pageable,
           promotionId:this.couponId
         },(data)=>{
           this.pageable.pageNumber++
           
           this.PromotionProduct.push.apply(this.PromotionProduct,data.products)
         })
      },
      // 点击排序 调用接口
      checkedOrderHeader(params){
        console.log(params)
      },
      go(params){
        if(this.$.env === 'wxPublic'){
          this.$.toast('请下载APP体验V商功能')
          this.$router.push({
            name:'down_page'
          })
          return;
        }
        let _item = params.item
        if(false && _item.productType === '0'){
          this.$router.push({
            name: "sg_goods_car",
            params: {
              id: _item.id,
              name: "1"
            }
          });
        }else{
          this.$router.push({
          name: "sg_goods",
          params: {
            id: _item.id,
            name: "1"
          }
        });
        }
        
      },
    }
  }
</script>

<style lang="scss">
  #promotion-info {
    background-color: #fff;
    min-height: 100%;
    .promotion-title {
      padding: 1rem 1rem 0;
      text-align: center;
      h3 {
        margin: 0;
        font-size: 1.6rem;
        padding: 1rem 0;
      }
      p.time {
        color: #929292;
      }
      div {
        margin-top: 1rem;
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        border: 1px solid #c60007;
        background-color: #fdf7f7;
        color: #414141;
      }
      p.text {
        margin-top: 1rem;
        text-align: left;
        text-indent: 2em;
      }
    }
    .promotion-content {
      padding: 2rem 1rem 0;
      .promotion-content-top {
        overflow: hidden;
        border-bottom: 1px solid #c5c5c5;
        padding-bottom: 0.3rem;
        .content-top-left {
          float: left;
          border-left: 0.4rem solid #c60007;
          padding-left: 1rem;
          line-height: 1.6rem;
          font-size: 1.4rem;
          color: #1a1a1a;
        }
        .content-top-right {
          width: 50%;
          float: right;
          span.active {
            color: #c60007;
          }
          span {
            padding-left: 1.4rem;
          }
        }
      }
      .promotion-content-list {
        overflow: hidden;
        padding-top: 1rem;
        .check{
          font-size: 14px;
          span{
            color: red;
          }
        }
        .couponAmount{
          text-align: right;
          line-height: 40px;
          font-size: 14px;
          padding-right: 10px;
          span{
            color: red;
          }
        }
      }
    }
    
  }
</style>
